<template>
  <div class="app-main-box">
    <!-- 未来可能做页面修改,因此tab只做装饰用,页面其全部通过v-if判断显示隐藏 -->
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleTabChange">
      <el-tab-pane label="发端" name="start"></el-tab-pane>
      <el-tab-pane label="铁路" name="railway"></el-tab-pane>
      <el-tab-pane label="到端" name="end"></el-tab-pane>
    </el-tabs>

    <!-- <div class="tab-list">
      <div class="tab-item" @click="handleTabChange('start')">
        <div class="left">
          <div class="left-top">
            <span class="text-title">发端</span>
            <span class="arrow-right"><el-icon>
                <ArrowRightBold />
              </el-icon></span>
          </div>
          <p class="left-content">发端数据</p>
        </div>
        <div class="right" v-if="activeName == 'start'">
          <svg-icon class="check-icon" icon-class="check-symbol2" />
        </div>
      </div>
      <div class="tab-item" @click="handleTabChange('railway')">
        <div class="left">
          <div class="left-top">
            <span class="text-title">铁路</span>
            <span class="arrow-right"><el-icon>
                <ArrowRightBold />
              </el-icon></span>
          </div>
          <p class="left-content">铁路数据</p>
        </div>
        <div class="right" v-if="activeName == 'railway'">
          <svg-icon class="check-icon" icon-class="check-symbol2" />
        </div>
      </div>
      <div class="tab-item" @click="handleTabChange('end')">
        <div class="left">
          <div class="left-top">
            <span class="text-title">到端</span>
            <span class="arrow-right"><el-icon>
                <ArrowRightBold />
              </el-icon></span>
          </div>
          <p class="left-content">到端数据</p>
        </div>
        <div class="right" v-if="activeName == 'end'">
          <svg-icon class="check-icon" icon-class="check-symbol2" />
        </div>
      </div>
    </div> -->

    <!-- 发端搜索区域 -->
    <el-form v-if="activeName == 'start'" class="global-search-form" v-show="showSearch" :model="queryParams"
      ref="queryRef" :inline="true">
      <el-form-item style="width: 100%;">
        <el-button-group @click.catch="changeReconciledType($event)">
          <el-button :type="queryParams.isReconciled == 0 ? 'primary' : 'default'">未对账</el-button>
          <el-button :type="queryParams.isReconciled == 1 ? 'primary' : 'default'">已对账</el-button>
        </el-button-group>
      </el-form-item>
      <el-form-item class="from-item" label="车牌号：" prop="plateNo">
        <el-input v-noSpace v-model="queryParams.plateNo" placeholder="请输入车牌号" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item class="from-item" label="磅单号：" prop="weightBillNo" style="width: 260px;">
        <el-input v-noSpace v-model="queryParams.weightBillNo" placeholder="请输入磅单号" clearable
          @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item class="from-item" label="箱号：" prop="containerNo">
        <el-input v-noSpace v-model="queryParams.containerNo" placeholder="请输入箱号" clearable
          @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item class="from-item" label="线路：" prop="routeId">
        <el-select v-model="queryParams.routeId" placeholder="请选择线路" placement="right-end" filterable
          :teleported="false" class="global-search-select-area">
          <el-option v-for="item in routeOption" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item class="from-item" label="发车时间：" style="min-width: max-content;width: 504px">
        <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" range-separator="-"
          start-placeholder="开始日期" end-placeholder="结束日期" placement="right" :teleported="false"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button class="global-search-button" type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button class="global-search-button" icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 铁路搜索区域 -->
    <el-form v-if="activeName == 'railway'" class="global-search-form" v-show="showSearch" :model="queryParams"
      ref="queryRef" :inline="true">
      <el-form-item style="width: 100%;">
        <el-button-group @click.catch="changeReconciledType($event)">
          <el-button :type="queryParams.isReconciled == 0 ? 'primary' : 'default'">未对账</el-button>
          <el-button :type="queryParams.isReconciled == 1 ? 'primary' : 'default'">已对账</el-button>
        </el-button-group>
      </el-form-item>
      <el-form-item class="from-item" label="磅单号：" prop="weightBillNo" style="width: 260px;">
        <el-input v-noSpace v-model="queryParams.weightBillNo" placeholder="请输入磅单号" clearable
          @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item class="from-item" label="箱号：" prop="containerNo">
        <el-input v-noSpace v-model="queryParams.containerNo" placeholder="请输入箱号" clearable
          @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item class="from-item" label="运单号：" prop="waybillNo">
        <el-input v-noSpace v-model="queryParams.waybillNo" placeholder="请输入运单号" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item class="from-item" label="车号：" prop="trainNo">
        <el-input v-noSpace v-model="queryParams.trainNo" placeholder="请输入车号" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item class="from-item" label="装车日期：" style="min-width: max-content;width: 504px">
        <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
          start-placeholder="开始日期" end-placeholder="结束日期" placement="right" :teleported="false"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button class="global-search-button" type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button class="global-search-button" icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 到端搜索区域 -->
    <el-form v-if="activeName == 'end'" class="global-search-form" v-show="showSearch" :model="queryParams"
      ref="queryRef" :inline="true">
      <el-form-item style="width: 100%;">
        <el-button-group @click.catch="changeReconciledType($event)">
          <el-button :type="queryParams.isReconciled == 0 ? 'primary' : 'default'">未对账</el-button>
          <el-button :type="queryParams.isReconciled == 1 ? 'primary' : 'default'">已对账</el-button>
        </el-button-group>
      </el-form-item>
      <el-form-item class="from-item" label="磅单号：" prop="weightBillNo" style="width: 260px;">
        <el-input v-noSpace v-model="queryParams.weightBillNo" placeholder="请输入磅单号" clearable
          @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item class="from-item" label="箱号：" prop="containerNo">
        <el-input v-noSpace v-model="queryParams.containerNo" placeholder="请输入箱号" clearable
          @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item class="from-item" label="车牌号：" prop="plateNo">
        <el-input v-noSpace v-model="queryParams.plateNo" placeholder="请输入车牌号" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item class="from-item" label="过磅日期：" style="min-width: max-content;width: 504px">
        <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
          start-placeholder="开始日期" end-placeholder="结束日期" placement="right" :teleported="false"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button class="global-search-button" type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button class="global-search-button" icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 发端表格数据 -->
    <div class="global-table-container">
      <el-table v-if="activeName == 'start'" class="global-border-radius-table" algin="center" v-loading="loading"
        :data="transportList">
        <el-table-column label="运单编号" prop="id" min-width="200" :show-overflow-tooltip="true" />
        <el-table-column label="磅单号" prop="weightBillNo" min-width="200" :show-overflow-tooltip="true" />
        <el-table-column label="箱号" prop="containerNo" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="线路名称" prop="routeName" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="货物" prop="cargo" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column label="车牌号" prop="plateNo" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column label="发车时间" prop="departureTime" min-width="180" :show-overflow-tooltip="true" />
        <el-table-column label="是否对账" prop="reconciled" min-width="120" :show-overflow-tooltip="true">
          <template #default="scope">
            <span class="is-check" v-if="scope.row.reconciled">
              <el-icon class="icon">
                <CircleCheckFilled />
              </el-icon>
              已对账
            </span>
            <span class="no-check" v-else>
              <el-icon class="icon">
                <RemoveFilled />
              </el-icon>
              未对账
            </span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="200" class-name="small-padding"
          v-if="queryParams.isReconciled == 0">
          <template #default="scope">
            <el-button link type="primary" icon="Edit" @click="handleStartEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 铁路表格数据 -->
    <div class="global-table-container">
      <el-table v-if="activeName == 'railway'" class="global-border-radius-table" algin="center" v-loading="loading"
        :data="transportList">
        <el-table-column label="磅单号" prop="weightBillNo" min-width="200" :show-overflow-tooltip="true" />
        <!-- <el-table-column label="车号" prop="trainNo" min-width="150" :show-overflow-tooltip="true" /> -->
        <el-table-column label="箱号" prop="containerNo" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="运单号" prop="waybillNo" min-width="150" :show-overflow-tooltip="true" />
        <!-- <el-table-column label="篷布号" prop="coverClothNo" min-width="200" :show-overflow-tooltip="true" /> -->
        <el-table-column label="货物" prop="cargo" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="重量" prop="weight" min-width="100" :show-overflow-tooltip="true" />
        <el-table-column label="装车日期" prop="loadingDate" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="发站" prop="departureStation" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="到站" prop="arrivalStation" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="是否对账" prop="reconciled" min-width="150" :show-overflow-tooltip="true">
          <template #default="scope">
            <span class="is-check" v-if="scope.row.reconciled">
              <el-icon class="icon">
                <CircleCheckFilled />
              </el-icon>
              已对账
            </span>
            <span class="no-check" v-else>
              <el-icon class="icon">
                <RemoveFilled />
              </el-icon>
              未对账
            </span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="240" class-name="small-padding"
          v-if="queryParams.isReconciled == 0">
          <template #default="scope">
            <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button link :type="scope.row.originatingId ? 'primary' : 'info'" icon="View"
              @click="handleView(scope.row)">发端数据</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 到端表格数据 -->
    <div class="global-table-container">
      <el-table v-if="activeName == 'end'" class="global-border-radius-table" algin="center" v-loading="loading"
        :data="transportList">
        <el-table-column label="车牌号" prop="plateNo" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="箱号" prop="containerNo" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="磅单号" prop="weightBillNo" min-width="200" :show-overflow-tooltip="true" />
        <el-table-column label="过磅日期" prop="weightingDate" min-width="200" :show-overflow-tooltip="true" />
        <el-table-column label="货物" prop="cargo" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="净重" prop="netWeight" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="是否对账" prop="checked" min-width="150" :show-overflow-tooltip="true">
          <template #default="scope">
            <span class="is-check" v-if="scope.row.reconciled">
              <el-icon class="icon">
                <CircleCheckFilled />
              </el-icon>
              已对账
            </span>
            <span class="no-check" v-else>
              <el-icon class="icon">
                <RemoveFilled />
              </el-icon>
              未对账
            </span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="200" class-name="small-padding"
          v-if="queryParams.isReconciled == 0">
          <template #default="scope">
            <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>


    <!-- 发端编辑运单对话框 -->
    <start-edit v-if="activeName == 'start'" ref="startEditRef" @updateStartRowData="updateStartRowData"></start-edit>

    <!-- 铁路编辑运单对话框 -->
    <el-dialog v-if="activeName == 'railway'" title="编辑运单" v-model="dialog_form_edit" width="800px"
      style="min-width: 750px" append-to-body>
      <!-- 编辑表单区域 -->
      <!-- 提示 -->
      <el-form-item v-if="formEdit.originatingId" class="global-tip-container" style="width: 100%;">
        <div class="global-tip">
          <span class="tip-icon"><svg-icon icon-class="light-tip" /></span>
          <div class="tip-content">
            <p>当前运单已完成发端数据匹配，无法修改箱号以及装货日期.</p>
          </div>
        </div>
      </el-form-item>
      <el-form class="global-form-edit" :model="formEdit" ref="formEditRef" :rules="formEditRules" label-width="120px">
        <el-form-item label="磅单号：" prop="weightBillNo" class="form-items">
          <el-input v-noSpace v-model="formEdit.weightBillNo" class="form-input" placeholder="请输入磅单号"
            clearable></el-input>
        </el-form-item>
        <el-form-item label="车号：" prop="trainNo" class="form-items">
          <el-input v-noSpace v-model="formEdit.trainNo" class="form-input" placeholder="请输入车号" clearable></el-input>
        </el-form-item>
        <el-form-item label="箱号：" prop="containerNo" class="form-items">
          <el-input v-noSpace v-model="formEdit.containerNo" class="form-input" placeholder="请输入箱号" clearable
            :disabled="formEdit.originatingId ? true : false"></el-input>
        </el-form-item>
        <el-form-item label="篷布号：" prop="coverClothNo" class="form-items">
          <el-input v-noSpace v-model="formEdit.coverClothNo" class="form-input" placeholder="请输入篷布号"
            clearable></el-input>
        </el-form-item>
        <el-form-item label="运单号：" prop="waybillNo" class="form-items">
          <el-input v-noSpace v-model="formEdit.waybillNo" class="form-input" placeholder="请输入运单号" clearable></el-input>
        </el-form-item>
        <el-form-item label="货物：" prop="cargo" class="form-items">
          <el-input v-noSpace v-model="formEdit.cargo" class="form-input" placeholder="请输入货物" clearable></el-input>
        </el-form-item>
        <el-form-item label="重量(吨)：" prop="weight" class="form-items">
          <el-input v-noSpace v-model="formEdit.weight" class="form-input" placeholder="请输入重量" clearable>
            <template #append>吨</template>
          </el-input>
        </el-form-item>
        <el-form-item label="装车日期：" prop="loadingDate" class="form-items">
          <el-date-picker value-format="YYYY-MM-DD" v-model="formEdit.loadingDate" type="date" placeholder="请选择装车日期"
            style="width: 100%;" clearable :disabled="formEdit.originatingId ? true : false" />
        </el-form-item>
        <el-form-item label="发站：" prop="departureStation" class="form-items">
          <el-input v-noSpace v-model="formEdit.departureStation" class="form-input" placeholder="请输入发站"
            clearable></el-input>
        </el-form-item>
        <el-form-item label="到站：" prop="arrivalStation" class="form-items">
          <el-input v-noSpace v-model="formEdit.arrivalStation" class="form-input" placeholder="请输入到站" clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="托运人：" prop="consignor" class="form-items">
          <el-input v-noSpace v-model="formEdit.consignor" class="form-input" placeholder="请输入托运人" clearable></el-input>
        </el-form-item>
        <el-form-item label="收货人：" prop="consignee" class="form-items">
          <el-input v-model="formEdit.consignee" class="form-input" placeholder="请输入收货人" clearable></el-input>
        </el-form-item>
      </el-form>

      <div class="dialog-footer" style="margin-top: 2px;">
        <el-button type="primary" @click="submitFormEdit">确 定</el-button>
        <el-button @click="cancelEdit">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 到端表编辑运单对话框 -->
    <el-dialog v-if="activeName == 'end'" title="编辑运单" v-model="dialog_form_edit" width="800px" style="min-width: 750px"
      append-to-body>
      <el-form class="global-form-edit" :model="formEdit" ref="formEditRef" :rules="formEditRules" label-width="120px">
        <el-form-item label="车牌号：" prop="plateNo" class="form-items">
          <el-input v-noSpace v-model="formEdit.plateNo" class="form-input" placeholder="请输入车牌号" clearable></el-input>
        </el-form-item>
        <el-form-item label="箱号：" prop="containerNo" class="form-items">
          <el-input v-noSpace v-model="formEdit.containerNo" class="form-input" placeholder="请输入箱号"
            clearable></el-input>
        </el-form-item>
        <el-form-item label="磅单号：" prop="weightBillNo" class="form-items">
          <el-input v-noSpace v-model="formEdit.weightBillNo" class="form-input" placeholder="请输入磅单号"
            clearable></el-input>
        </el-form-item>
        <el-form-item label="过磅日期：" prop="weightingDate" class="form-items">
          <el-date-picker value-format="YYYY-MM-DD" v-model="formEdit.weightingDate" type="date" placeholder="请选择过磅日期"
            style="width: 100%;" clearable />
        </el-form-item>
        <el-form-item label="货物名称：" prop="cargo" class="form-items">
          <el-input v-noSpace v-model="formEdit.cargo" class="form-input" placeholder="请输入货物名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="净重(吨)：" prop="netWeight" class="form-items">
          <el-input v-noSpace v-model="formEdit.netWeight" class="form-input" placeholder="请输入净重" clearable>
            <template #append>吨</template>
          </el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" style="margin-top: 2px;">
        <el-button type="primary" @click="submitFormEdit">确 定</el-button>
        <el-button @click="cancelEdit">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 发端数据-查看运单对话框 -->
    <start-info ref="formViewRef"></start-info>

    <!-- 页码控件 -->
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageIndex"
      v-model:limit="queryParams.pageSize" :pageSizes="[15, 20, 30, 50]" @pagination="getList" />
  </div>
</template>

<script setup name="transportOrderList">
import { ref, reactive, toRefs, onBeforeMount, onMounted, watchEffect, computed, getCurrentInstance, onActivated, onDeactivated } from 'vue';
import { ElMessage } from 'element-plus'
import { updateListApi as updateRailListApi } from "@/api/transportOrderManagement/railway";
import { updateHaulApi as updateStartListApi } from "@/api/transportOrderManagement/transportOrderList";
import { updateListApi as updateEndListApi } from "@/api/transportOrderManagement/endShortBarge";
import { listTransPortApi } from "@/api/transportOrderManagement/transportOrderList";
import { getListApi as getRailwayListApi } from "@/api/transportOrderManagement/railway";
import { getListApi as getEndListApi } from "@/api/transportOrderManagement/endShortBarge";
import { getRouteSimpleListApi } from "@/api/common";
import startInfo from '@/views/components/startInfo'
import startEdit from '@/views/components/startEdit'
const router = useRouter();
const { proxy } = getCurrentInstance();
let formViewRef = ref(null)
let startEditRef = ref(null)
let activeName = ref('start') // start-发端,railway-铁路,end-到端
let loading = ref(true);
let showSearch = ref(true);
let dialog_form_edit = ref(false)
let total = ref(0);
let dateRange = ref([]);
let transportList = ref([]) // 发端短驳
let routeOption = ref([])  // 线路下拉列表
let bg = ref(["#5285DC", "#F3AE4F", "#4FAA6A", "#47B8E0", "#EE7F58", "#9A60B4"])
/** 列表查询参数 */
const data = reactive({
  formEdit: {},
  formEditRules: {
    weightBillNo: [{ required: true, message: "磅单号不能为空", trigger: "blur" }],
    trainNo: [{ required: true, message: "车号不能为空", trigger: "blur" }],
    coverClothNo: [{ required: true, message: "篷布号不能为空", trigger: "blur" }],
    waybillNo: [{ required: true, message: "运单号不能为空", trigger: "blur" }],
    cargo: [{ required: true, message: "货物不能为空", trigger: "blur" }],
    weight: [
      { required: true, message: "重量不能为空", trigger: "blur" },
      { pattern: /^(?!0(\.0+)?$)\d+(\.\d+)?$/, message: '仅允许输入大于0的小数和整数', trigger: 'blur' },
      { pattern: /^(?!0\d)(\d+(\.\d*)?|\.\d+)$/, message: '输入内容不合法', trigger: 'blur' }
    ],
    loadingDate: [{ required: true, message: "装车日期不能为空", trigger: "blur" }],
    departureTime: [{ required: true, message: "发车时间不能为空", trigger: "blur" }],
    arrivalStation: [{ required: true, message: "发站不能为空", trigger: "blur" }],
    departureStation: [{ required: true, message: "到站不能为空", trigger: "blur" }],
    consignor: [{ required: true, message: "托运人不能为空", trigger: "blur" }],
    consignee: [{ required: true, message: "收货人不能为空", trigger: "blur" }],
    containerNo: [
      { required: true, message: "箱号不能为空", trigger: "blur" },
      // { max: 11, message: "箱号不能超过11位", trigger: "blur" }
    ],
    netWeight: [
      { required: true, message: "净重不能为空", trigger: "blur" },
      { pattern: /^(?!0(\.0+)?$)\d+(\.\d+)?$/, message: '仅允许输入大于0的小数和整数', trigger: 'blur' },
      { pattern: /^(?!0\d)(\d+(\.\d*)?|\.\d+)$/, message: '输入内容不合法', trigger: 'blur' },
    ],
    weightingDate: [{ required: true, message: "过磅日期不能为空", trigger: "blur" }],
    plateNo: [{ required: true, message: "车牌号不能为空", trigger: "blur" }],
  },
  // 发端表单验证
  formStartRules: {
    weightBillNo: [{ required: true, message: "磅单号不能为空", trigger: "blur" }],
    trainNo: [{ required: true, message: "车号不能为空", trigger: "blur" }],
    departureTime: [{ required: true, message: "发车时间不能为空", trigger: "blur" }],
    arrivalTime: [{ required: true, message: "到达时间不能为空", trigger: "blur" }],
    containerNo: [
      { required: true, message: "箱号不能为空", trigger: "blur" },
      // { max: 11, message: "箱号不能超过11位", trigger: "blur" }
    ],
    netWeight: [
      { required: true, message: "净重不能为空", trigger: "blur" },
      { pattern: /^(?!0(\.0+)?$)\d+(\.\d+)?$/, message: '仅允许输入大于0的小数和整数', trigger: 'blur' },
      { pattern: /^(?!0\d)(\d+(\.\d*)?|\.\d+)$/, message: '输入内容不合法', trigger: 'blur' },
    ],
  },
  queryParams: {
    pageIndex: 1,
    pageSize: 15,
    routeId: 'all',
    isReconciled: '0'  // 是否对账
  }
});
const { queryParams, formEdit, formEditRules, formStartRules } = toRefs(data);
/** 
* Methods
*/
/** 查询列表 */
function getList() {
  if (activeName.value === 'start') {
    getStartList()
  } else if (activeName.value === 'railway') {
    getRailwayList()
  } else {
    getEndList()
  }
}

/** 发端列表 */
function getStartList() {
  loading.value = true;
  const { routeId, isChecked, ...rest } = queryParams.value
  let params = rest
  params["isChecked"] = 1
  routeId != 'all' ? params["routeId"] = routeId : null
  listTransPortApi(proxy.addDateRange(params, dateRange.value)).then(response => {
    transportList.value = response.data.records;
    total.value = Number(response.data.total);
    loading.value = false;
  }).catch(err => {
    loading.value = false;
  })
}


/** 铁路列表 */
function getRailwayList() {
  loading.value = true;
  const { routeId, isChecked, ...rest } = queryParams.value
  let params = rest
  isChecked != 'all' ? params["isChecked"] = isChecked : null
  routeId != 'all' ? params["routeId"] = routeId : null
  getRailwayListApi(proxy.addDateRange(params, dateRange.value, 'Date')).then(response => {
    transportList.value = response.data.records;
    total.value = Number(response.data.total);
    loading.value = false;
  }).catch(err => {
    loading.value = false;
  })
}

/** 到端列表 */
function getEndList() {
  loading.value = true;
  const { routeId, isChecked, ...rest } = queryParams.value
  let params = rest
  isChecked != 'all' ? params["isChecked"] = isChecked : null
  getEndListApi(proxy.addDateRange(params, dateRange.value, 'Date')).then(response => {
    transportList.value = response.data.records;
    total.value = Number(response.data.total);
    loading.value = false;
  }).catch(err => {
    loading.value = false;
  })
}

/** 切换对账类型 */
function changeReconciledType(e) {
  if (e.target.innerText == '未对账') {
    queryParams.value.isReconciled = '0'
  } else {
    queryParams.value.isReconciled = '1'
  }
  getList()
}

/** 线路下拉列表 */
function getRouteSimpleList() {
  getRouteSimpleListApi().then(response => {
    if (response.code === 1) {
      routeOption.value = response.data
      routeOption.value.unshift({ name: '全部', id: 'all' })
    } else {
      ElMessage({ message: response.message, type: 'error' })
    }
  }).catch(err => {
  })
}

/** 打开编辑弹框 */
async function handleEdit(row) {
  resetFormEdit()
  formEdit.value = { ...row, billNo: row.weightBillNo }
  dialog_form_edit.value = true
}

/** 提交表单 */
function submitFormEdit() {
  proxy.$refs["formEditRef"].validate(valid => {
    if (valid) {
      updateList()
    }
  })
}


/** 提交编辑表单 */
function updateList() {
  let row = { ...formEdit.value }
  let module = undefined
  if (activeName.value === 'end') {
    module = updateEndListApi
    row['receiptDrayageId'] = formEdit.value.id
  } else {
    module = updateRailListApi
    row['railwayConsignmentId'] = formEdit.value.id
  }
  module(row).then(response => {
    if (response.code === 1) {
      updateTableRowData(response.data)
      dialog_form_edit.value = false
      ElMessage({ message: response.message || '操作成功', type: 'success' })
    } else {
      ElMessage({ message: response.message, type: 'error' })
    }
  }).catch(err => {
  })
}


/** 更新发端列表 */
function updateStartRowData(row) {
  console.log(row);

  updateTableRowData(row)
}

/** 手动更新表格中某行的数据 */
function updateTableRowData(params) {
  transportList.value = transportList.value.map(item => {
    if (item.id.toString() == params.id.toString()) {
      // if (activeName.value === 'start') {
      //   // 不需要更新的数据
      //   delete params.routeName
      //   delete params.cargo
      //   delete params.plateNo
      //   delete params.routeId
      //   delete params.driverId
      //   delete params.driverName
      //   delete params.checked
      // }
      item = Object.assign(item, params)
    }
    return item
  });
}

/** 取消关闭编辑表单 */
function cancelEdit() {
  dialog_form_edit.value = false
}

/** 重置编辑表单 */
function resetFormEdit() {
  //  清空表单及验证条件
  formEdit.value = {
    weightBillNo: undefined,
    trainNo: undefined,
    containerNo: undefined,
    coverClothNo: undefined,
    waybillNo: undefined,
    cargo: undefined,
    weight: undefined,
    loadingDate: undefined,
    arrivalStation: undefined,
    departureStation: undefined,
    consignor: undefined,
    consignee: undefined,
    plateNo: undefined,
    weightingDate: undefined,
    netWeight: undefined,
    departureTime: undefined,
    driverName: undefined,
    routeName: undefined,
    arrivalTime: undefined,
    checked: 1,
    checkNotes: undefined
  }
  proxy.resetForm("formEditRef");
}

/** 切换tab */
function handleTabChange(name) {
  activeName.value = name
  resetQuery()
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageIndex = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  queryParams.value.routeId = 'all'
  queryParams.value.isReconciled = '0' // 已对帐
  queryParams.value.containerNo = undefined
  queryParams.value.plateNo = undefined
  queryParams.value.trainNo = undefined
  queryParams.value.waybillNo = undefined
  queryParams.value.weightBillNo = undefined
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 打开详情页面对话框 */
function handleView(row) {
  if (!row.originatingId) {
    ElMessage({ message: '未完成发端数据匹配', type: 'error' })
    return false
  }
  formViewRef.value.viewData(row)
}

/** 打开发端编辑页面对话框 */
function handleStartEdit(row) {
  startEditRef.value.viewData(row)
}


getList();
getRouteSimpleList()
</script>

<style lang='scss' scoped>
@import '../../../../assets/styles/variables.module.scss';

.app-main-box {
  background: #fff;
  border-radius: 12px;
  min-height: calc(100vh - 125px);
  width: calc(100% - 40px);


  .global-table-container {
    padding: 0px 24px;
  }

  /** 审核状态 */
  .is-check,
  .no-check {
    display: flex;
    align-items: center;
    justify-content: center;

    &>.icon {
      margin: 0 4px !important;
    }
  }

  .is-check {
    color: $--color-primary;
  }

  .no-check {
    color: #c9c9c9;
  }

  /** 车辆类型tag样式 */
  .vehicle-tag {
    // display: inline-block;
    // padding: 0px 4px;
    // height:  18px;
    // line-height: 18px;
    // border-radius: 2px;
    // background-color: $--color-primary;
    // color: #fff;
    // transform: skewX(-20deg);
    font-size: 14px;
  }

  .other-tag {
    background-color: #c9c9c9;
  }
}

.statistic {
  .card-panel-col {
    // width: 220px;
    height: 120px;

    .statistic-card {
      width: 100%;
      height: 100%;
      border-radius: 10px;

      & span:last-child {
        display: flex;
        justify-content: center;
        font-size: 36px;
        font-weight: 700;
      }
    }
  }
}

:deep(.el-tabs__nav) {
  .el-tabs__item {
    min-width: max-content !important;
    padding: 0px 50px !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #515a6e;
    height: 50px !important;
  }

  .is-active {
    color: $--color-primary;
  }
}


.dialog-footer {
  margin-top: 24px;
  text-align: right;
}

.tab-list {
  width: 100%;
  padding: 20px 24px 0px;
  display: flex;
  box-sizing: border-box;

  .tab-item {
    flex: 1;
    height: 110px;
    padding: 10px 20px;
    border-radius: 4px;
    display: flex;
    position: relative;
    cursor: pointer;

    .left {
      flex: 1;
      display: flex;
      flex-direction: column;

      .left-top {
        height: 40%
      }

      .left-content {
        flex: 1;
        letter-spacing: 1px;
        font-size: 16px;
      }
    }

    .right {
      width: 110px;
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;

      .check-icon {
        width: 100%;
        height: 100%;
      }
    }

    .right {
      width: 55px !important;
      height: 50% !important;
      right: 0;
      top: 0;
    }

    .left-top {
      display: flex;
      align-items: center;
      line-height: 1;
    }
  }

  .tab-item:first-of-type {
    background-image: linear-gradient(to right, #ecfcfc, #d9f8f8);

    .text-title {
      color: #0597a4;
      font-weight: bold;
      font-size: 24px;
      letter-spacing: 6px;
    }

    .arrow-right {
      width: 20px;
      height: 20px;
      background-color: #0597a4;
      border-radius: 50%;
      color: #fff;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      margin-left: 6px;
    }

    .left-content {
      color: #0597a4;
    }

    .check-icon {
      color: #0597a4 !important;
      stroke: #0597a4 !important;
    }
  }

  .tab-item:nth-of-type(2) {
    background-image: linear-gradient(to right, #ebfafe, #dcf1f9);
    margin: 0 5%;

    .text-title {
      color: #1876d5;
      font-weight: bold;
      font-size: 24px;
      letter-spacing: 6px;
    }

    .arrow-right {
      width: 20px;
      height: 20px;
      background-color: #1876d5;
      border-radius: 50%;
      color: #fff;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      margin-left: 6px;
    }

    .left-content {
      color: #1876d5;
    }

    .check-icon {
      fill: #1876d5 !important;
      stroke: #1876d5 !important;
    }
  }

  .tab-item:last-of-type {
    background-image: linear-gradient(to right, #f1f7ff, #e6f0fe);

    .text-title {
      color: #3d6fe2;
      font-weight: bold;
      font-size: 24px;
      letter-spacing: 6px;
    }

    .arrow-right {
      width: 20px;
      height: 20px;
      background-color: #3d6fe2;
      border-radius: 50%;
      color: #fff;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      margin-left: 6px;
    }

    .left-content {
      color: #3d6fe2;
    }

    .check-icon {
      fill: #3d6fe2 !important;
      stroke: #3d6fe2 !important;
    }
  }
}
</style>